<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:p="http://primefaces.org/ui">

<h:head>
	<title>#{msgs.windowTitle}</title>
	<h:outputStylesheet library="css" name="Styles.css" />
</h:head>

<h:body>
	<h:panelGroup styleClass="toolbar">
		<ui:include src="/resources/templates/toolbar.xhtml" />
	</h:panelGroup>
	<h:form>
		<p:panel header="#{msgs.existingUser}">

			<h:panelGrid columns="3">
				<h:outputLabel for="userName" value="#{msgs.userName}"/>
				<p:inputText id="userName" value="#{userBean.currentUser.userName}"
					required="true" requiredMessage="#{msgs.requiredUserName}"
					validator="#{userBean.validateUserName}"
					validatorMessage="#{msgs.validateUserName}">
					<f:ajax render="userNameError"/>
				</p:inputText>
				<p:message id="userNameError" for="userName" />

				<h:outputLabel for="password" value="#{msgs.password}" />
				<p:password id="password" value="#{userBean.currentUser.password}"
					required="true" requiredMessage="#{msgs.requiredPassword}"
					validator="#{userBean.validateUserPassword}"
					validatorMessage="#{msgs.validatePassword}">
				</p:password>

				<p:message id="pwError" for="password" />
			</h:panelGrid>
			<p:commandButton value="#{msgs.login}"
				action="#{userBean.verifyUser}" update="userNameError pwError">
				<p:effect id="effect" event="click" type="shake" for="password"
					speed="200" delay="500"/>
			</p:commandButton>
		</p:panel>
	</h:form>
	<p:spacer height="10px" />
	<h:form>
		<p:panel header="#{msgs.newUser}" toggleable="true" collapsed="true">
			<!-- <p:messages id="messages" showDetail="true" autoUpdate="true"/>  -->
			<h:panelGrid columns="3">
				<h:outputLabel for="userName" value="#{msgs.userName}" />
				<p:inputText id="userName" value="#{userBean.currentUser.userName}"
					validator="#{userBean.validateNewUserName}"
					validatorMessage="#{msgs.validateNewUserName}">
					<f:ajax event="keyup" render="availableError"/>
				</p:inputText>
				<p:message id="availableError" for="userName" display="true"/>

				<h:outputLabel for="password" value="#{msgs.password}" />
				<p:password id="password" value="#{userBean.currentUser.password}"
					label="#{msgs.password}" required="true" feedback="true"
					inline="true" immediate="">
					<p:ajax event="keyup" render="pwerror"/>
				</p:password>
				<p:message id="pwerror" for="password" />

				<h:outputLabel for="repeatpassword" value="#{msgs.repeatPassword}" />
				<p:password id="repeatpassword" label="#{msgs.repeatPassword}"
					value="#{userBean.currentUser.password}" required="true"
					match="password" immediate="true">
					<p:ajax event="keyup" render="pwrepeaterror"/>
				</p:password>
				<p:message id="pwrepeaterror" for="repeatpassword"/>
			</h:panelGrid>
			<p:commandButton value="#{msgs.createNewUser}"
				action="#{userBean.createNew}" update="pwrepeaterror" />
		</p:panel>
	</h:form>
</h:body>
</html>